@media (max-width: 1139.9px) and (max-width: 1139.9px) {
    .content {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1140px) and (max-width: 1299.9px) {
    .content {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1400px) and (max-width: 1559.9px) {
    .content {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1560px) and (max-width: 2060px) {
    .content {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 2060px) and (min-width: 2060px) {
    .content {
        grid-template-columns: repeat(5, 1fr);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
}

body {
    max-width: 2560px;
    min-width: 1060px;
    margin: 0 auto;
}

header {
    height: 155px;
    background-color: greenyellow;
}

.banner {
    background-color: pink;
    height: 155px;
}

.banner .bar {
    height: 64px;
    background-color: blue;

}

main {
    width: 100%;
    height: 50000px;
    padding: 0 60px;
    background-color: yellow;
}

.channel {
    background-color: black;
    height: 100px;
}

.content {
    display: grid;
    /* grid:
        'myArea myArea . . .'
        'myArea myArea . . .'; */
    grid-gap: 20px;
    /* grid-column-start: ; */
    /* align-items: start; */
    /* grid-template-columns: repeat(5, 1fr); */
    /* grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); */
    /* height: 10000px; */
    background-color: white;

}

.content>div {
    background-color: yellowgreen;
    /* max-height: 780px; */
    /* max-height: 614px;
    min-width: 500px; */
    /* min-height: 436px; */
}

.content>.item-slider {
    background-color: pink;
    grid-column: 1/3;
    max-height: 1000px;
    grid-row: 1/3;
}